<template>
  <div class="digital-clock-container">
    <div
      class="digital-clock bg-dark text-white rounded-xl shadow-2xl p-6 transition-all duration-300 hover:shadow-accent/30"
    >
      <!-- 日期时间显示 -->
      <div
        class="time-display text-center"
        style="display: flex; justify-content: center"
      >
        <div class="date-part text-lg mb-1 opacity-80">
          {{ formattedDate }}
        </div>
        <div
          class="time-part text-[clamp(2rem,5vw,3.5rem)] font-bold font-mono"
          style="margin-left: 10px"
        >
          <span
            class="transition-all duration-300"
            :class="{
              'text-accent scale-110':
                isTimeUpdated && currentSegment === 'hours',
            }"
            >{{ hours }}</span
          >
          <span class="time-separator animate-pulse">:</span>
          <span
            class="transition-all duration-300"
            :class="{
              'text-accent scale-110':
                isTimeUpdated && currentSegment === 'minutes',
            }"
            >{{ minutes }}</span
          >
          <span class="time-separator animate-pulse">:</span>
          <span
            class="transition-all duration-300"
            :class="{
              'text-accent scale-110':
                isTimeUpdated && currentSegment === 'seconds',
            }"
            >{{ seconds }}</span
          >
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted, computed } from "vue";

// 星期数组
const weekdays = [
  "星期日",
  "星期一",
  "星期二",
  "星期三",
  "星期四",
  "星期五",
  "星期六",
];

// 状态变量
const now = ref(new Date());
const hours = ref("00");
const minutes = ref("00");
const seconds = ref("00");
const year = ref("0000");
const month = ref("00");
const day = ref("00");
const weekday = ref("星期一");
const timer = ref(null);
const isTimeUpdated = ref(false);
const currentSegment = ref("");
const showFullDate = ref(true); // 是否显示完整日期格式

// 计算属性：格式化的日期
const formattedDate = computed(() => {
  if (showFullDate.value) {
    return `${year.value}-${month.value}-${day.value}`;
  } else {
    const monthNames = [
      "一月",
      "二月",
      "三月",
      "四月",
      "五月",
      "六月",
      "七月",
      "八月",
      "九月",
      "十月",
      "十一月",
      "十二月",
    ];
    return `${year.value}年${monthNames[parseInt(month.value) - 1]}${
      day.value
    }日`;
  }
});

// 更新时间函数
const updateTime = () => {
  const previousSeconds = seconds.value;
  now.value = new Date();

  // 获取时间组件
  const h = now.value.getHours();
  const m = now.value.getMinutes();
  const s = now.value.getSeconds();

  // 更新时间状态
  year.value = now.value.getFullYear();
  month.value = String(now.value.getMonth() + 1).padStart(2, "0");
  day.value = String(now.value.getDate()).padStart(2, "0");
  hours.value = String(h).padStart(2, "0");
  minutes.value = String(m).padStart(2, "0");
  seconds.value = String(s).padStart(2, "0");
  weekday.value = weekdays[now.value.getDay()];
};

// 切换日期格式
const toggleFormat = () => {
  showFullDate.value = !showFullDate.value;
};

// 生命周期钩子
onMounted(() => {
  // 初始化时间
  updateTime();

  // 设置定时器每秒更新一次
  timer.value = setInterval(updateTime, 1000);
});

onUnmounted(() => {
  // 清理定时器
  if (timer.value) {
    clearInterval(timer.value);
  }
});
</script>

<style scoped>
.digital-clock-container {
  max-width: 400px;
  width: 100%;
  margin: 0 auto;
  font-size: 2.5vh;
  font-weight: bold;
  color: #12f0f8;
  text-shadow: 0 0 10px rgba(255, 255, 255, 1);
}

.digital-clock {
  transition: all 0.3s ease;
}

.time-separator {
  animation: blink 1s infinite;
}

@keyframes blink {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.3;
  }
}

.text-accent {
  color: #8b5cf6;
}

.scale-110 {
  transform: scale(1.1);
}
</style>
